<template>
  <div class="homemenu">
    <div class="left">
      <ht-ms-logo redirct="/" />
      <el-menu
        :default-active="$route.path"
        class=""
        active-text-color="#ffd04b"
        :router="true"
        :collapse="false"
        :unique-opened="true"
        :default-openeds="['home']"
      >
        <el-submenu index="home">
          <template slot="title">首页</template>
          <el-menu-item index="/test2">test2</el-menu-item>
          <el-menu-item index="/test1">test1</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="menu_right">
      <ht-ms-header v-if="$route.meta.header"></ht-ms-header>
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: 'test1' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'test2' }">首页2</el-breadcrumb-item>
      </el-breadcrumb>
      <router-view class="router_homeview" />
      <ht-ms-footer v-if="$route.meta.footer"></ht-ms-footer>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import footer from "@/components/footer";
import header from "@/components/header";
import htlogo from "@/components/logo";
export default {
  components: {
    [footer.name]: footer,
    [header.name]: header,
    [htlogo.name]: htlogo
  },
  methods: {
    clicktest() {
      this.$message.warning("test");
    }
  },
  data() {
    return {
      default_active: "",
      logo_url: require("@/assets/logo.png")
    };
  }
};
</script>

<style lang="scss">
.homemenu {
  display: flex;
  flex-direction: row;
  height: 100%;

  .left {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-right: solid 0.01852rem #e6e6e6;

    .el-menu {
      border-right: none;
      flex: 1;
    }
  }
  .menu_right {
    flex: 1;

    .breadcrumb {
      padding: 10px;
      .el-breadcrumb__inner {
        cursor: pointer;
        color: #4b92d4;
      }
    }
    .router_homeview {
      padding: 10px 10px 0 10px;
    }
  }
}
</style>
